<template>
  <div>
    <div class="search_box">
      <el-input v-model="searchcontent.plate" placeholder="车牌"></el-input>
      <el-date-picker
        v-model="searchcontent.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="getList">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :height="h"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="project_name" label="项目" align="center">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="日期"
        align="center"
        width="160"
      >
        <template slot-scope="scope">
          <div>
            {{
              !Array.isArray(scope.row.create_time)
                ? scope.row.start_time
                : `${scope.row.start_time} - ${scope.row.end_time}`
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="plate" label="车牌" align="center" width="120">
        <template slot-scope="scope">
          <div
            :style="{
              color: scope.row.source == 1 ? '#67c23a' : '#f56c6c',
            }"
          >
            {{ scope.row.plate }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="specifications" label="规格" align="center">
      </el-table-column>

      <el-table-column prop="unit_price" label="单价" align="center">
      </el-table-column>
      <el-table-column prop="agreed_time" label="规定工时" align="center">
      </el-table-column>
      <el-table-column prop="true_time" label="实际工时" align="center">
      </el-table-column>
      <el-table-column prop="overtime_unit" label="加班单价" align="center">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.type == 1
                ? Number(scope.row.unit_price) / Number(scope.row.agreed_time)
                : scope.row.overtime_unit
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="overtime_hours" label="加班时长" align="center">
        <template slot-scope="scope">
          <div>
            {{
              scope.row.type == 1
                ? Number(scope.row.true_time) - Number(scope.row.agreed_time)
                : scope.row.overtime_hours
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="units" label="计量单位" align="center">
      </el-table-column>

      <el-table-column
        prop="total_price"
        label="总金额"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="工作内容"
        align="center"
        width="300"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="operator" label="操作人员" align="center">
      </el-table-column>
      <el-table-column prop="lessee" label="承租单位" align="center">
      </el-table-column>
      <el-table-column prop="dispatcher" label="派车人员" align="center">
      </el-table-column>
      <el-table-column prop="company" label="派车单位" align="center">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        width="300"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="type"
        label="签证单"
        align="center"
        fixed="right"
        width="120px"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 30px; height: 20px"
            :src="scope.row.img"
            :preview-src-list="[scope.row.img]"
          >
          </el-image>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="type"
        label="签证单"
        align="center"
        fixed="right"
        width="120px"
      >
        <template slot-scope="scope">
          <el-button @click="delData(scope.row)" type="text"
            >删除签证单</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
    <div class="page_table">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchcontent.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, deleteDB, editDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";
const fs = require("fs");

export default {
  data() {
    return {
      tableData: [],
      searchcontent: {
        plate: "",
        time: [],
        page: 1,
        size: 100,
        total: 0,
      },
      h: "",
    };
  },
  created() {
    this.getList();
    this.h = document.documentElement.offsetHeight - 270;
  },
  methods: {
    delData(row) {
      row.is_bill = 1;
      row.img = "";
      editDB("list", "出车记录表", row).then(() => {
        this.getList();
      });
    },
    printListData() {
      let header = [
        { value: "type", label: "机械类型" },
        { value: "specifications", label: "规格" },
        { value: "plate", label: "车牌" },
        { value: "start_time", label: "使用日期" },
        { value: "units", label: "计量单位" },
        { value: "work_time", label: "数量" },
        { value: "overtime_price", label: "加班单价" },
        { value: "overtime_time", label: "加班时长" },
        { value: "overtime_amount", label: "加班费" },
        { value: "receivable", label: "应收金额" },
        { value: "paid_in", label: "实收金额" },
        { value: "poor_harvest", label: "欠收金额" },
        { value: "remark", label: "说明" },
      ];
      let msg = {
        msg1: "客户用车记录",
      };
      printData(msg, this.printList, header);
    },
    resetSearch() {
      this.searchcontent = {
        plate: "",
        time: [],
        page: 1,
        size: 100,
        total: 0,
      };
      this.getList();
    },
    getList() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "出车记录表").then((res) => {
          let result = res?.data.filter((item) => {
            return item.is_bill == 2;
          });
          let { total, list } = searchTable(result, this.searchcontent, 1);
          list.map((item) => {
            item.img = "C:/images/" + item.project_name + "/" + item.img;
          });
          (this.searchcontent.total = total), (this.tableData = list);
        });
      });
    },
    handleSizeChange(val) {
      this.searchcontent.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchcontent.page = val;
      this.getList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (
          rowIndex > 0 &&
          this.tableData[rowIndex].project_id ==
            this.tableData[rowIndex - 1].project_id
        ) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (this.tableData[i].project_id == row.project_id) {
              rowspan++;
            } else {
              break;
            }
          }
          return { rowspan: rowspan, colspan: 1 };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
